<template>
  <div>
    <Card>
      <p slot="title">
        <!-- <Icon type="ios-film-outline"></Icon> -->
        产品添加
      </p>
      <FormItem label="产品名称">
        <Input v-model="formItem.slideName" placeholder="请输入产品名称"/>
      </FormItem>
      <Form :model="formItem" :label-width="80" style="max-width:600px">
        <FormItem label="项目外链">
          <Input v-model="formItem.externalLinks" placeholder="请输入产品外链">
            <Select v-model="select1" slot="prepend" style="width: 80px">
              <Option value="http">http://</Option>
              <Option value="https">https://</Option>
            </Select>
          </Input>
        </FormItem>
        <FormItem label="幻灯片图片">
          <input type="hidden" v-model="formItem.cover" placeholder="请输入产品名称">
          <div class="yui-cover-box">
            <input
              class="yui-cover-box-fileInput"
              type="file"
              accept="image/png, image/jpeg, image/gif, image/jpg"
              @change="upImg"
            >
            <img class="yui-cover-box-img" v-if="formItem.cover" :src="$config.baseUrl.dev_y+formItem.cover" alt>
          </div>
        </FormItem>

        <!-- <FormItem label="Radio">
          <RadioGroup v-model="formItem.radio">
            <Radio label="male">Male</Radio>
            <Radio label="female">Female</Radio>
          </RadioGroup>
        </FormItem>-->
        <!-- <FormItem label="Checkbox">
          <CheckboxGroup v-model="formItem.checkbox">
            <Checkbox label="Eat"></Checkbox>
            <Checkbox label="Sleep"></Checkbox>
            <Checkbox label="Run"></Checkbox>
            <Checkbox label="Movie"></Checkbox>
          </CheckboxGroup>
        </FormItem>-->
        <!-- <FormItem label="Switch">
          <i-switch v-model="formItem.switch" size="large">
            <span slot="open">On</span>
            <span slot="close">Off</span>
          </i-switch>
        </FormItem>-->
        <!-- <FormItem label="Slider">
          <Slider v-model="formItem.slider" range></Slider>
        </FormItem>-->
        <FormItem label="摘要">
          <Input
            v-model="formItem.abstract"
            type="textarea"
            :autosize="{minRows: 2,maxRows: 5}"
            placeholder="请填写摘要"
          ></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="ySub">Submit</Button>
          <Button style="margin-left: 8px">Cancel</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>
<script>
  import { uploadFile } from "@/api/public";
  import { saveSlide } from "@/api/slide";
  import { mapMutations } from 'vuex'
  export default {
    data() {
      return {
        formItem: {
          proName: "", //产品名称
          pubdate: "", //发布时间
          abstract: "", //摘要
          externalLinks: "", //项目外链
          cover: "", //封面
          input: "",
          select: "",
          radio: "male",
          checkbox: [],
          switch: true,

          textarea: ""
        },
        select1: "http"
      };
    },
    methods: {
      ...mapMutations([
        'closeTag'
      ]),
      /**
       * 封面图上传
       */
      upImg: function(fileDom) {
        let that = this;
        let files = event.target.files || event.dataTransfer.files;
        if (!files.length) {
          return;
        }
        let file = files[0];
        let formData = new FormData();
        formData.append("file", file);
        uploadFile(formData).then(res => {
          if (res.data.msg === 0) {
            that.formItem.cover = res.data.path;
          }
        });
      },

      ySub: function() {
        let that = this;
        let obj = that.formItem;
        saveSlide(obj).then(
          res => {
            console.log(res);
            if(res.data.msg===0||res.data.msg==='0'){
              that.$Modal.success({
                title: '添加成功',
                content: '幻灯片添加成功',
                onOk: () => {
                  // that.$Message.info('Clicked ok');
                  this.closeTag({
                    name: 'slideAdd'
                  })
                },
              });
            }
          }).catch(err => {
          console.log("err", err);
        });
      }
    }
  };
</script>
<style>
  .yui-cover-box {
    width: 300px;
    height: 180px;
    position: relative;
    border: 1px double #d9d9d9;
  }
  .yui-cover-box:after,
  .yui-cover-box:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #d9d9d9;
  }
  .yui-cover-box:after {
    width: 2px;
    height: 100px;
  }
  .yui-cover-box:before {
    width: 100px;
    height: 2px;
  }
  .yui-cover-box-fileInput {
    position: absolute;
    opacity: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1000;
  }
  .yui-cover-box-img {
    position: absolute;

    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
  }
</style>


